<template>
	<view class="u-page">
		<view class="u-demo-block">
			<u--form
				:labelWidth="80"
				:model="formData"
				:rules="formRules"
				ref="form">
	
				
				<!-- 作业项目 -->
				<u-form-item
					label="作业项目"
					prop="opItemName"
					ref="opItem"
					required
					@click="opItemFormItemClick">
					<u-input
						v-model="formData.opItemName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择作业项目"
						fontSize="13px"
						color="#12569F"
						suffixIcon="arrow-right">
					</u-input>
				</u-form-item>
				
				<!-- 作业记录 -->
				<u-form-item
					v-show="show.formItemShow.recordItem"
					:label="formItemRecordLabel"
					prop="recordValue"
					ref="recordItem">
					<!-- 文本域 -->
					<u--textarea
						v-model="formData.recordValue"
						v-show="show.formItemShow.recordItemInner.textarea"
						:placeholder="textPlaceholder"
						autoHeight
						count
						:maxlength="144">
					</u--textarea>
					<!-- input输入框 -->
					<u-input
						v-model="formData.recordValue"
						v-show="show.formItemShow.recordItemInner.input"
						:placeholder="textPlaceholder"
						clearable
						:disabled="disabled.textInputItem"
						@clear="textInputIteClear"
						@focus="textInputItemFocus"
						@blur="textInputItemBlur">
					</u-input>
					<!-- 单选框 -->
					<u-radio-group
						v-show="show.formItemShow.recordItemInner.radio"
						v-model="formData.recordValue"
						placement="column"
						@change="radioChange">
						<u-radio
							v-for="(item,index) in selectedOpItemPojo.opItemContent"
							:key="index"
							:label="item"
							:name="item"
							:customStyle="{marginLeft:'80px',marginBottom: '10px'}">
							
						</u-radio>
					</u-radio-group>
					<!-- 多选框 -->
					<u-checkbox-group
						v-show="show.formItemShow.recordItemInner.checkbox"
						v-model="checkboxOpRecordValueArr"
						placement="column"
						@change="checkboxChange">
						<u-checkbox
							v-for="(item,index) in selectedOpItemPojo.opItemContent"
							:key="index"
							:label="item"
							:name="item"
							:customStyle="{marginLeft:'80px',marginBottom: '10px'}">
							
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<view class="echo">
					<u--text
						type="success"
						wordWrap="break-word"
						:lines="2"
						:text="echo.qrPn"
						:customStyle="{marginBottom:'8px'}">
					</u--text>
					<u--text
						type="success"
						wordWrap="break-word"
						:lines="2"
						:text="echo.qrLotNo">
					</u--text>
				</view>
				<u-line></u-line>
				<u-form-item
					label="选择列"
					required
					prop="checkboxColumnsNoArr"
					ref="columnNo">
					<u-checkbox-group
						v-model="formData.checkboxColumnsNoArr"
						placement="column"
						:disabled="disabled.checkboxColumnsNo"
						@change="columnsNoChange">
						<u-checkbox
							v-for="(item,index) in selectedOpItemPojo.mutiColCount"
							:key="index"
							:label="item"
							:name="item"
							:customStyle="checkboxCustomStyle">
						</u-checkbox>
					</u-checkbox-group>
					
				</u-form-item>
				<u-line></u-line>
				<!-- 输入备注 -->
				<u-form-item
					label="备注"
					prop="remark"
					ref="remark">
					<u--textarea
						v-model="formData.remark"
						placeholder="如需备注,请输入"
						autoHeight
						count
						:maxlength="144"
						:disabled="disabled.remark">
						
					</u--textarea>
				</u-form-item>
				<!-- 输入确认者 -->
				<u-form-item
					label="确认"
					prop="operationVerify"
					ref="operationVerify">
					<u-input
						v-model="formData.operationVerify"
						clearable
						placeholder="请输入确认者姓名或账号"
						:disabled="disabled.operationVerify">
						
					</u-input>
				</u-form-item>
			</u--form>
			
			<u-button
				type="primary"
				text="提交"
				customStyle="margin-top: 20px"
				@click="formSubmit">
			</u-button>
			<u-button
				type="warning"
				text="提交继续"
				customStyle="margin-top: 20px"
				@click="formReInput">
			</u-button>
			<u-button
				type="warning"
				text="重置"
				plain
				customStyle="margin-top: 20px"
				@click="formReset">
			</u-button>
			
			<!-- 作业项目选择器 -->
			<u-picker 
				:show="show.clickShow.opItemPicker" 
				:columns="opItemPickerList"
				:closeOnClickOverlay="true"
				keyName="opItemName"
				@confirm="opItemPickerConfirm"
				@close="show.clickShow.opItemPicker=false"
				@cancel="show.clickShow.opItemPicker=false">
			</u-picker>

		</view>	
	</view>
</template>

<script>
import {getOpItemListByMachineNo} from '@/api/opitem/optiem.js';

import {getQrType} from '@/api/qrtype/qrtype.js'


export default {
	data() {
		return {
			formData:{
				opItemName:'',
				recordValue:'',
				// columnsNoValue:'',
				// 选择列时的数组
				checkboxColumnsNoArr:[],
				remark:'',
				operationVerify:'',
				timeInfo:{
					begin:'',
					end:''
				}
			},
			formRules:{
				opItemName:[
					{
						required: true, 
						message: '不能为空',
						trigger: ['change','blur'],
					},
				],
				//记录内容的验证方法
				recordValue:[
					{
						required: true, 
						message: '不能为空',
						trigger: ['change','blur'],
					},
					{
						validator:(rule,value,callback)=>{
							if(uni.$u.test.isEmpty(value)){
								return false
							}
							return true
						},
						message:'至少选一项',
						trigger: ['change','blur'],
					},
				],
				// 选择列
				checkboxColumnsNoArr:[
					{
						type:'array',
						min:1,
						required:true,
						message:'至少选一项',
						trigger:['change']
					}
				]
				
			},
			echo:{
				qrPn:'',
				qrLotNo:''
			},
			show:{
				formItemShow:{		//form项目的显示
					recordItem:false,
					recordItemInner:{
						input: false,
						textarea:false,
						radio: false,
						checkbox:false,
					}
				},
				clickShow:{		// 点击时触发的显示
					opItemPicker:false
				}
			},
			disabled:{
				textInputItem: false,
				checkboxColumnsNo:true,
				remark:true,
				operationVerify:true
			},
			opItemPickerList:[
				[]
			],
			selectedOpItemPojo:{},
			formItemRecordLabel:'',
			textPlaceholder:'',
			//qrtype的原型
			qrType:{},
			// 作业时多选时的数组
			checkboxOpRecordValueArr:[],
	
			// checkbox样式
			checkboxCustomStyle:{
				marginBottom:'0px'
			},
			recordSelectCustomStyle:{
				marginLeft:'80px',
				marginBottom: '0px'
			}
		};
	},
	methods:{
		/**
		 * 作业项目的表单子项 点击事件
		 */
		opItemFormItemClick(){
			// 获取菜单
			getOpItemListByMachineNo({machineNo:'zuli-e-01'})
				.then(res=>{
					let tempList=[]
					res.data.forEach(item=>{
						tempList.push(item)
					})
					
					// console.log([tempList]);
					this.opItemPickerList= [tempList]
					
					// 显示菜单,隐藏键盘
					uni.$u.sleep(100).then(()=>{
						this.show.clickShow.opItemPicker=true;
						// #ifdef APP-PLUS
						uni.hideKeyboard()
						// #endif
					})
				})
				.catch(err=>{
					uni.showToast({
						title:err.msg ||(err.errMsg+': 服务器异常'),
						icon:'error'
					})
				})

		},
		/**
		 * 作业项目中picker确认按钮点击事件
		 * @param {Object} selectedOpItem 选中的对象
		 */
		opItemPickerConfirm(selectedOpItem){
			// 初始化数据
			this.initData()
			
			// 选中值 selectedOpItem.value 是一个数组
			if(uni.$u.test.array(selectedOpItem.value)){
				// 作业项目名称赋值
				this.formData.opItemName=selectedOpItem.value[0].opItemName
				// 临时保存一下选中的作业项目
				this.selectedOpItemPojo=selectedOpItem.value[0]
			}
			// 设置选择列的格式
			if(!(uni.$u.test.isEmpty(this.selectedOpItemPojo.mutiColCount*1))){
				
				// 当选择列条数大于1时
				if((this.selectedOpItemPojo.mutiColCount*1)>1) {
					this.checkboxCustomStyle.marginBottom='8px'
				} else {
					this.checkboxCustomStyle.marginBottom='0px'
				}
				let tempArr=[]
				for(let i=0;i<this.selectedOpItemPojo.mutiColCount;i++){
					tempArr.push('第'+(i+1)+'列')
				}
				this.selectedOpItemPojo.mutiColCount=tempArr
				this.disabled.checkboxColumnsNo=false

				this.formData.checkboxColumnsNoArr[0]='第1列'
				// this.formData.columnsNoValue=this.checkboxColumnsNoArr.join()
			}
			// 设置备注相关
			this.disabled.remark=false
			// 设置确认者相关
			this.disabled.operationVerify=false
			
			// 关闭项目选择器
			this.show.clickShow.opItemPicker=false

			//显示需要记录的内容
			this.recordShow();			
		},
		/**
		 * 显示需要记录的内容
		 */
		recordShow(){
			console.log(this.selectedOpItemPojo);
			// 显示记录的form item
			this.show.formItemShow.recordItem=true

			// 如果记录方法是文本时
			if(this.selectedOpItemPojo.opItemContentType=='text'){
				// input项的label赋值
				this.formItemRecordLabel=this.selectedOpItemPojo.opItemContent
				if(this.selectedOpItemPojo.qrType=="textstr"){
					this.textPlaceholder="请直接输入"	
					this.show.formItemShow.recordItemInner.textarea=true
				} else {
					this.textPlaceholder="请扫描"
					this.show.formItemShow.recordItemInner.input=true
				}
			}
			// 如果记录方法是单选或多选
			// else if(this.selectedOpItemPojo.opItemContentType=='select'){
			else {
				if(uni.$u.test.isEmpty(this.selectedOpItemPojo.opItemContent)){
					uni.showToast({
						title:'系统设定异常',
						icon:'error'
					})
					uni.$u.sleep(1500).then(()=>{
						return
					})
				}
				// 按;分割字符串
				this.selectedOpItemPojo.opItemContent = this.selectedOpItemPojo.opItemContent.split(/;|；/i)
				if(uni.$u.test.array(this.selectedOpItemPojo.opItemContent) && this.selectedOpItemPojo.opItemContent.length>1){
					this.recordSelectCustomStyle.marginLeft='80px'
					this.recordSelectCustomStyle.marginBottom='10px'
				}
				if(this.selectedOpItemPojo.opItemContentType=='select'){
					// 默认第一个值被选中
					this.formData.recordValue=this.selectedOpItemPojo.opItemContent[0]
					this.show.formItemShow.recordItemInner.radio=true
					this.echo.qrPn='单选↑'
				} else {
					// 默认第一个值被选中
					this.checkboxOpRecordValueArr=[this.selectedOpItemPojo.opItemContent[0]]
					this.formData.recordValue=this.checkboxOpRecordValueArr.join(';')
					this.show.formItemShow.recordItemInner.checkbox=true
					this.echo.qrPn='多选↑'
				}

			}
		},
		textInputItemFocus(){
			uni.$u.sleep(100).then(()=>{
				// #ifdef APP-PLUS
				uni.hideKeyboard()
				// #endif
			})
		},
		// 文本输入框失焦事件
		textInputItemBlur(val){
			if(uni.$u.test.isEmpty(this.selectedOpItemPojo.qrType)){
				uni.showToast({
					title:'系统设定异常',
					icon:'error'
				})
				return ;
			}
			getQrType({qrTypeName:this.selectedOpItemPojo.qrType})
				.then(res=>{
					this.qrType=res.data
					this.formData.recordValue=val.substr(this.qrType.pnFrom,this.qrType.pnLength).trim() + " | "+ val.substr(this.qrType.lotNoFrom,this.qrType.lotNoLength).trim()
					// this.disabled.textInputItem= true
					this.echo.qrPn="型名: " + val.substr(this.qrType.pnFrom,this.qrType.pnLength).trim()
					this.echo.qrLotNo="LotNo: " + val.substr(this.qrType.lotNoFrom,this.qrType.lotNoLength).trim() 
				})
				.catch(err=>{
					uni.showToast({
						title:err.msg,
						icon:'error'
					})
					return
				})
				
		},
		textInputIteClear(){
			uni.$u.sleep(100).then(()=>{
				this.formData.recordValue=''
				this.echo.qrPn=''
				this.echo.qrLotNo=''
			})
		},
		radioChange(selected){
			this.formData.recordValue=selected
		},
		checkboxChange(selected){
			this.checkboxOpRecordValueArr=selected
			this.formData.recordValue=this.checkboxOpRecordValueArr.join(';')
		},
		columnsNoChange(selected){
			this.formData.checkboxColumnsNoArr=selected
			// this.formData.columnsNoValue=this.checkboxColumnsNoArr.join(';')
		},
		initData(){
			// 清空opItemPojo对象
			this.selectedOpItemPojo={}
			// 清空其他属性
			this.formItemRecordLabel=''
			this.textPlaceholder=''
			
			// 清空一般数据
			this.opItemName=''
			this.formData.recordValue=''
			
			// this.formData.columnsNoValue=''
			this.formData.remark=''
			this.formData.operationVerify=''
			this.checkboxOpRecordValueArr=[]
			this.formData.checkboxColumnsNoArr=[]
			
			// 全部返回不显示
			this.show.formItemShow.recordItem=false
			this.show.formItemShow.recordItemInner.input=false
			this.show.formItemShow.recordItemInner.textarea=false
			this.show.formItemShow.recordItemInner.radio=false
			this.show.formItemShow.recordItemInner.checkbox=false
			
			// 使能
			this.disabled.textInputItem= false
			this.disabled.checkboxColumnsNo=true
			this.disabled.remark=true
			this.disabled.operationVerify=true
			// 回显
			this.echo.qrPn=''
			this.echo.qrLotNo=''
			// 样式
			this.checkboxCustomStyle.marginBottom='0px'
			this.recordSelectCustomStyle.marginLeft='80px'
			this.recordSelectCustomStyle.marginBottom='0px'
		},
		formSubmit(){
			this.$refs.form.validate()
				.then(res=>{
					console.log(res);
				})
				.catch(err=>{
					console.log(err);
				})
		},
		formReInput(){
			
		},
		formReset(){
			uni.reLaunch({
				url:'/pages/ttest/ttest2'
			})
		}
		
	}
	
}
</script>

<style lang="scss" scoped>
.echo {
	margin-left: 80px;
}
</style>
